<script setup lang="ts">
//   接收参数props
import { defineProps, onMounted, toRefs } from 'vue'

const emits = defineEmits(['update:redio'])

const props = defineProps({
  optionThree: {
    type: Object,
    default: () => ({})
  },
  radio: {
    type: Number,
    default: 1
  }
})
const { optionThree, radio } = toRefs(props)
onMounted(() => {
  console.log(optionThree?.value)
})
const changeRadio = (e: any) => {
  emits('update:redio', e)
}
const handleCollapsed = () => {
  console.log('handleCollapsed')
}
</script>

<template>
  <div class="radio-panel">
    <el-radio-group v-model="radio" @change="changeRadio">
      <div class="tree-item" v-for="(item, k) in optionThree" :key="k">
        <div class="title" style="position: relative" @click="item.collapsed = !item.collapsed">
          {{ item.label }}
<!--          <CaretLeftOutlined v-if="!item.collapsed" />-->
<!--          <CaretDownOutlined v-if="item.collapsed" />-->
        </div>
<!--        <div :class="[!item.collapsed && 'collapsed']" style="margin-left: 20px">-->
        <div class="" style="margin-left: 20px">
          <div class="children-wrapper" v-for="(ele, i) in item.children" :key="i">
            <div class="children-item">
              <el-radio :label="ele.value">{{ ele.label }}</el-radio>
            </div>
          </div>
        </div>
      </div>
    </el-radio-group>
  </div>
</template>

<style scoped lang="scss">
.radio-panel {
  .el-radio-group {
    flex-direction: column;
    width: 100%;
  }

  .el-radio {
    color: #fff !important;
    font-size: 14px;

    ::v-deep(.el-radio__input) {
      .el-radio__inner {
        width: 12px;
        height: 12px;
        opacity: 1;
        border: 1px solid #fff;
        border-radius: 0;
        background: transparent;

        &:after {
          width: 7px;
          height: 7px;
          border-radius: 0;
          background-color: #0ec79b;
        }
      }
    }
  }

  ::v-deep(.el-radio__input.is-checked + .el-radio__label) {
    color: #fff;
  }
}

.tree-item {
  color: #fff;
  margin-bottom: 10px;
  width: 100%;

  .collapsed {
    height: 0;
    overflow: hidden;
    transition: height 0.3s;
  }

  .title {
    color: #fff;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    width:calc(100% - 20px);
    height: 32px;
    background: #3DA78E;
    border-radius: 4px 4px 4px 4px;
    //border: 1px solid #83bfef;
    cursor: pointer;
    align-items: center;
  }
}
</style>
